<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layouts/main-layout :: html(~{::title}, ~{::pageStyles}, '仪表盘', ~{::#dashboard-content}, ~{::pageScripts})}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能医疗诊断助手 - 仪表盘</title>
    
    <!-- 页面特定CSS -->
    <th:block th:fragment="pageStyles">
        <link rel="stylesheet" th:href="@{/css/pages/dashboard.css}">
    </th:block>
</head>
<body>
    <!-- 仪表盘内容 -->
    <div id="dashboard-content">
        <!-- 统计卡片 -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-icon patients">
                    <span data-icon="patients"></span>
                </div>
                <div class="stat-data">
                    <h3>患者总数</h3>
                    <p class="stat-value">1,254</p>
                    <p class="stat-change increase">+5.2% <span>较上月</span></p>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon appointments">
                    <span data-icon="appointments"></span>
                </div>
                <div class="stat-data">
                    <h3>今日预约</h3>
                    <p class="stat-value">42</p>
                    <p class="stat-change increase">+12.3% <span>较昨日</span></p>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon diagnosis">
                    <span data-icon="diagnosis"></span>
                </div>
                <div class="stat-data">
                    <h3>诊断准确率</h3>
                    <p class="stat-value">94.7%</p>
                    <p class="stat-change increase">+1.2% <span>较上月</span></p>
                </div>
            </div>
            
            <div class="stat-card">
                <div class="stat-icon records">
                    <span data-icon="medical-records"></span>
                </div>
                <div class="stat-data">
                    <h3>病历记录</h3>
                    <p class="stat-value">3,127</p>
                    <p class="stat-change increase">+8.4% <span>较上月</span></p>
                </div>
            </div>
        </div>
        
        <!-- 图表和表格区域 -->
        <div class="dashboard-grid">
            <!-- 诊断分析图表 -->
            <div class="dashboard-card chart-card">
                <div class="card-header">
                    <h2>诊断分析</h2>
                    <div class="card-actions">
                        <select id="diagnosisTimeRange">
                            <option value="week">本周</option>
                            <option value="month" selected>本月</option>
                            <option value="year">本年</option>
                        </select>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="diagnosisChart"></canvas>
                        <!-- 图表将通过JavaScript渲染 -->
                        <div class="chart-placeholder" style="display:none;">
                            <p>图表加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 患者分布图表 -->
            <div class="dashboard-card chart-card">
                <div class="card-header">
                    <h2>患者年龄分布</h2>
                    <div class="card-actions">
                        <button class="card-action-btn">
                            <span data-icon="menu"></span>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="patientAgeChart"></canvas>
                        <!-- 图表将通过JavaScript渲染 -->
                        <div class="chart-placeholder" style="display:none;">
                            <p>图表加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最近预约 -->
            <div class="dashboard-card">
                <div class="card-header">
                    <h2>今日预约</h2>
                    <div class="card-actions">
                        <a href="/appointments" class="view-all">查看全部</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="appointment-list">
                        <div class="appointment-item">
                            <div class="appointment-time">09:00</div>
                            <div class="appointment-info">
                                <h4>张三</h4>
                                <p>常规体检 - 内科</p>
                            </div>
                            <div class="appointment-status confirmed">已确认</div>
                        </div>
                        <div class="appointment-item">
                            <div class="appointment-time">10:30</div>
                            <div class="appointment-info">
                                <h4>李四</h4>
                                <p>复诊 - 心脏科</p>
                            </div>
                            <div class="appointment-status pending">待确认</div>
                        </div>
                        <div class="appointment-item">
                            <div class="appointment-time">11:15</div>
                            <div class="appointment-info">
                                <h4>王五</h4>
                                <p>首诊 - 神经科</p>
                            </div>
                            <div class="appointment-status confirmed">已确认</div>
                        </div>
                        <div class="appointment-item">
                            <div class="appointment-time">14:00</div>
                            <div class="appointment-info">
                                <h4>赵六</h4>
                                <p>检查结果咨询 - 影像科</p>
                            </div>
                            <div class="appointment-status confirmed">已确认</div>
                        </div>
                        <div class="appointment-item">
                            <div class="appointment-time">16:30</div>
                            <div class="appointment-info">
                                <h4>钱七</h4>
                                <p>术后随访 - 外科</p>
                            </div>
                            <div class="appointment-status pending">待确认</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 最近诊断 -->
            <div class="dashboard-card">
                <div class="card-header">
                    <h2>最近诊断</h2>
                    <div class="card-actions">
                        <a href="/diagnosis" class="view-all">查看全部</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="diagnosis-list">
                        <div class="diagnosis-item">
                            <div class="diagnosis-avatar">
                                <span>ZS</span>
                            </div>
                            <div class="diagnosis-info">
                                <h4>张三 - 感冒</h4>
                                <p>诊断时间: 2023-06-10 15:30</p>
                                <div class="diagnosis-tags">
                                    <span class="tag">发热</span>
                                    <span class="tag">咳嗽</span>
                                    <span class="tag">头痛</span>
                                </div>
                            </div>
                            <div class="diagnosis-accuracy">
                                <span>95%</span>
                            </div>
                        </div>
                        <div class="diagnosis-item">
                            <div class="diagnosis-avatar">
                                <span>LS</span>
                            </div>
                            <div class="diagnosis-info">
                                <h4>李四 - 高血压</h4>
                                <p>诊断时间: 2023-06-09 11:15</p>
                                <div class="diagnosis-tags">
                                    <span class="tag">头晕</span>
                                    <span class="tag">耳鸣</span>
                                </div>
                            </div>
                            <div class="diagnosis-accuracy">
                                <span>92%</span>
                            </div>
                        </div>
                        <div class="diagnosis-item">
                            <div class="diagnosis-avatar">
                                <span>WW</span>
                            </div>
                            <div class="diagnosis-info">
                                <h4>王五 - 糖尿病</h4>
                                <p>诊断时间: 2023-06-08 09:45</p>
                                <div class="diagnosis-tags">
                                    <span class="tag">多饮</span>
                                    <span class="tag">多尿</span>
                                    <span class="tag">体重减轻</span>
                                </div>
                            </div>
                            <div class="diagnosis-accuracy">
                                <span>97%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 页面特定脚本 -->
    <th:block th:fragment="pageScripts">
        <script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"></script>
        <script th:src="@{/js/pages/dashboard.js}"></script>
    </th:block>
</body>
</html> 